// 和用户管理有关的功能

// 引入二级路由的模板 

import usersView from '@/users.ejs';

// 引入 api模块 
import axios from  "../api/index.js";

export default function(router){
    router.route("/admin/users",(req,res)=>{
        res.render(usersView());
        // 点击添加用户 
        // 一、点击按钮的时候 显示添加用户的对话框 
        let addUserBtn = document.querySelector(".adduer");

        // 获取添加的对话框 
        let adduermodelEle = document.querySelector(".adduermodel");
        // 遮罩层元素
        let maskEle = document.querySelector(".mask");

        addUserBtn.onclick = function(){
            console.log("点击了");
            // 点击添加按钮的时候  让对话框和 遮罩层显示出来
            adduermodelEle.style.display = "block";
            maskEle.style.display = "block";
        }

        // 二 点击 关闭的时候 关闭 对话框 
        let  closebtnEle = document.querySelector(".closebtn");

        closebtnEle.onclick = function(){
            adduermodelEle.style.display = "none";
            maskEle.style.display = "none";
        }

        // 三 点击 提交按钮的时候  提交用户的信息 到后端。
        let imgFileEle = document.querySelector(".imgFile");
        let imgshowEle = document.querySelector(".imgshow")

        imgFileEle.onchange = function(){
            // input 发生改变的时候触发函数；
            console.log("发生改变了!!");
            // 获取上传的图片对象
            // 通过 input.files
            // console.log(this.files[0])
            let imgObj = this.files[0];
            let filerader = new FileReader();
            filerader.readAsDataURL(imgObj);  // 把图片对象转成url形式的数据，base64格式
            // 需要在filerader读完数据之后 获取base64
            filerader.onload = function(){
                // 读取完毕了，获取base64字符串
                console.log(filerader.result);
                let myimg = new Image(); // 创建一个img 标签
                myimg.src = filerader.result; // 设置图片的路径地址是获取到的base64的路径
                myimg.style.width = "100px";
                myimg.style.height = "100px";
                // 把图片的对象添加到html里
                imgshowEle.innerHTML = ""; // 请求显示的div里的内容
                imgshowEle.appendChild(myimg);
            }
        }

        // 点击提交按钮的时候 发送ajax
        let submitBtn = document.querySelector(".btn");
        let usernameEle = document.querySelector(".username");
        let pwdEle = document.querySelector(".pwd");
        let repeatpwdEle = document.querySelector(".repeatpwd");
        submitBtn.onclick =async function(){
            // 发送ajax 测试 
            // 获取用户名和密码
            let username = usernameEle.value;
            let pwd = pwdEle.value;
            let repeatpwd = repeatpwdEle.value;
            // 获取文件对象
            let imgfile = imgFileEle.files[0]; // 文件对象


            // 表单的校验 
            if(username ==""){
                return alert("用户名不能为空")
            }

            if(pwd == ""){
                return alert("密码不能为空")
            }

            // 两次输入的密码要一致
            if(pwd!==repeatpwd){
                return alert("两次输入的密码不同");
            }

            // 文件不能是undefined
            if(typeof imgfile == 'undefined'){
                return alert("图像不能为空");
            }

            console.log(username,pwd,imgfile);

            // 借助 FormData 预定义类
            let form  = new FormData();  // 模拟一个空的form表单
            form.append("username",username) ;
            form.append("pwd",pwd);
            form.append("myimg",imgfile);
            // console.log(form);
            // 把form当成数据直接提交给后端 ，自动设置请求头部信息 
            let res = await axios.post("/user/adduser",form);
            console.log(res);

        //     console.log("点击了提交按钮");
        //   let res = await axios.get("/user/getdata");
        //   console.log(res);
        }
    })

    



}
